.nav {
    position: fixed;
    z-index: 12;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 25px;
    background-color: var(--fff-color);
    box-shadow: 0 0 6px 2px var(--rgba-light);

    .logo_wrap {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--rgba-common);
        border-radius: 50%;
        // box-sizing: border-box;
        border: 1px solid var(--rgba-light);
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;

        @keyframes action {
            0% {}
            50% {transform: rotate(-10deg);}
            100% {transform: rotate(0deg);}
        }

        a, img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        a img:hover {
            animation: action .5s linear infinite;
        }
    }

    .nav_mid {
        a {
            box-sizing: border-box;
            padding: 6px 10px;
            border-radius: 4px;
            user-select: none;
            -webkit-user-select: none;
            background-color: var(--transparent-color);

            &:hover, 
            &.active {
                background-color: var(--deep-blue);
                transition: background-color .3s linear;
                color: var(--fff-color);
            }
        }
    }

    .icons {
        .phone {
            width: 32px;
            height: 32px;
            cursor: pointer;
        }
    }
}